<!--
    @auther: bypanghu<bypanghu@163.com>
    @date: 2024/5/8
    @desc: 图表组件，根据 type 决定显示的图表
!-->

<template>
  <div class="">
    <div class="flex items-center justify-between mb-2">
      <div v-if="title" class="font-bold">
        {{ title }}
      </div>
      <slot v-else name="title" />
    </div>
    <div class="w-full relative">
      <div v-if="type <= 4">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="268500" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +80% <el-icon><TopRight /></el-icon>
        </div>
      </div>

      <div class="absolute top-0 right-2 w-[50%] h-20">
        <charts-people-number v-if="type === 1" :data="data[0]" height="100%" />
        <charts-people-number v-if="type === 2" :data="data[1]" height="100%" />
        <charts-people-number v-if="type === 3" :data="data[2]" height="100%" />
        <charts-people-number v-if="type === 4" :data="data[3]" height="100%" />
      </div>

      <charts-content-number v-if="type === 5" height="14rem" />
      <charts-pie v-if="type === 6" height="14rem" :data="pieData[0]" title="饼图" />
      <div v-if="type === 7">
        <charts-bar :data="barData1" height="20rem" :title="title" />
      </div>
      <charts-pie v-if="type === 8" height="14rem" :data="pieData[2]" title="饼图" />
      <div v-if="type === 9" class="flex items-center">
        <div class="w-1/2">
          <el-text class="font-bold"> 平台访问次数统计</el-text>
          <charts-content-number height="14rem" />
        </div>
        <div class="w-1/2">
          <el-text class="font-bold"> 每日访问次数</el-text>
          <charts-content-number height="14rem" />
        </div>
      </div>
      <div v-if="type === 10">
        <charts-bar2 :data="barData2" height="50rem" :title="title" />
      </div>
      <div v-if="type === 11">
        <charts-col :data="colData" height="20rem" :title="title" />
      </div>
    </div>
  </div>
</template>

<script setup>
import chartsPeopleNumber from "./charts-people-numbers.vue";
import chartsContentNumber from "./charts-content-numbers.vue";
import chartsPie from "./charts-pie.vue";
import chartsBar from "./charts-bar.vue";
import chartsBar2 from "./charts-bar-2.vue";
import chartsCol from "./chart-col.vue";

const props = defineProps({
  type: {
    type: Number,
    default: 1
  },
  title: {
    type: String,
    default: ""
  },
  pieData: {
    type: Array,
    default: () => [
      [ { value: 1048, name: '开发' }, { value: 735, name: '金融' },{ value: 735, name: '数据' },{ value: 735, name: '用户' }],
      [ { value: 580, name: '邮件营销' }, { value: 484, name: '联盟广告' } ],
      [ { value: 300, name: '视频广告' }, { value: 200, name: '其他' } ]
    ]
  },
  barData1: {
    type: Array,
    default: () => [
      { name: '数据1', value: 10 },
      { name: '数据2', value: 20 },
      { name: '数据3', value: 30 },
      { name: '数据4', value: 40 },

    ]
  },
  barData2: {
    type: Array,
    default: () => [
      { name: '数据1', value: 10 },
      { name: '数据2', value: 20 },
      { name: '数据3', value: 30 },
      { name: '数据4', value: 40 },
      { name: '数据5', value: 50 },
      { name: '数据6', value: 60 },
      { name: '数据7', value: 70 },
      { name: '数据8', value: 80 },
      { name: '数据9', value: 90 },
      { name: '数据10', value: 100 },
    ]
  },
  colData: {
    type: Array,
    default: () => [
      { name: '数据1', value: 10 },
      { name: '数据2', value: 20 },
      { name: '数据3', value: 30 },
      { name: '数据4', value: 40 },
      { name: '数据5', value: 50 },
      { name: '数据6', value: 60 },

    ]
  }


});

const data = [
  [12, 22, 32, 45, 32, 78, 89, 92],
  [1, 2, 43, 5, 67, 78, 89, 12],
  [12, 22, 32, 45, 32, 78, 89, 92],
  [1, 2, 43, 5, 67, 78, 89, 12]
];
</script>

<style scoped lang="scss">
</style>
